<template>
    <div class="ls-add-admin">
        <div class="ls-card">
            <el-page-header @back="$router.go(-1)" :content="mode == 'edit' ? '编辑分销身份' : '新增分销身份'" />
        </div>

        <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">身份信息</div>
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <!-- 身份名称 -->
                <el-form-item label="身份名称" required>
                    <el-input :disabled="disabled" class="ls-input" v-model="form.name" placeholder="请输入身份名称">
                    </el-input>
                </el-form-item>

                <el-form-item label="身份描述">
                    <el-input
                        type="textarea"
                        :disabled="disabled"
                        placeholder="请输入内容"
                        style="width: 400px"
                        rows="8"
                        v-model="form.remark"
                        maxlength="30"
                        show-word-limit
                    />
                </el-form-item>
            </el-form>
        </div>

        <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">身份佣金收益 <span class="desc">以下收益不填写时，不产生收益</span></div>
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <el-form-item label="业绩分红">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.dividend.general.rate"
                        placeholder="业绩分红"
                    >
                        <template slot="append">%</template>
                    </el-input>
                    <span class="desc">将按照全体分销会员的业绩进行分润</span>
                </el-form-item>

                <el-form-item label="地图省代利率">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.province.general.rate"
                        placeholder="地图利率"
                    >
                        <template slot="append">%</template>
                    </el-input>
                    <span class="desc">开启地图收益之后，当分销会员必须选择一个可代理的地区</span>
                </el-form-item>
                <el-form-item label="地图市代利率">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.city.general.rate"
                        placeholder="地图利率"
                    >
                        <template slot="append">%</template>
                    </el-input>
                    <span class="desc">开启地图收益之后，当分销会员必须选择一个可代理的地区</span>
                </el-form-item>
                <el-form-item label="地图区代利率">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.district.general.rate"
                        placeholder="地图利率"
                    >
                        <template slot="append">%</template>
                    </el-input>
                    <span class="desc">开启地图收益之后，当分销会员必须选择一个可代理的地区</span>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">升级条件</div>
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <el-form-item label="身份条件">
                    <el-radio :disabled="disabled" v-model="form.update_relation" :label="1">积累消费</el-radio>
                    <el-radio :disabled="disabled" v-model="form.update_relation" :label="2">购买指定商品</el-radio>
                    <el-radio :disabled="disabled" v-model="form.update_relation" :label="3">业绩达标标准</el-radio>
                </el-form-item>

                <el-form-item label="" v-if="form.update_relation == 1">
                    <div class="m-b-10">
                        累计消费金额<el-input
                            :disabled="disabled"
                            class="ls-input m-l-10"
                            v-model="form.update_condition.free_money"
                            placeholder=""
                        >
                        <template slot="append">元</template>
                        </el-input
                        >
                    </div>
                </el-form-item>
                <el-form-item label="指定商品" v-if="form.update_relation == 2">
                    <goods-select
                        v-model="selectGoods"
                        mode="table"
                        :limit="1"
                        :showVirtualGoods="true"
                        :is-spec="true"
                        type="single"
                    >
                        <el-button size="mini" type="primary">选择指定商品</el-button>
                    </goods-select>
                    <div v-if="goodsInfo.id > 0">
                        <div class="m-b-10">
                            商品名称：{{ goodsInfo.name }}
                        </div>
                        <div class="m-b-10">
                            商品图片： <el-image
                                    class="flex-none"
                                    style="width: 88px; height: 88px"
                                    :src="goodsInfo.image"
                                    fit="cover"
                                />
                        </div>
                    </div>
                </el-form-item>
                <div v-if="form.update_relation == 3">
                    <el-form-item label="" >
                        <div class="m-b-10">
                            业绩达标金额<el-input
                                :disabled="disabled"
                                class="ls-input m-l-10"
                                v-model="form.update_condition.performance_amount"
                                placeholder=""
                            >
                            <template slot="append">元</template>
                            </el-input
                            >
                        </div>
                    </el-form-item>
               
                </div>
            </el-form>
        </div> -->
        <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">福利赠送 <span class="desc">成为该分销会员身份后立马赠送</span></div>
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <!-- <el-form-item label="">
                    <div class="m-b-10">
                        赠送贡献值<el-input
                            :disabled="disabled"
                            class="ls-input m-l-10"
                            v-model="form.welfare.contribution"
                            placeholder=""
                        >
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                </el-form-item> -->
                <el-form-item label="">
                    <div class="m-b-10">
                        赠送积分<el-input
                            :disabled="disabled"
                            class="ls-input m-l-10"
                            v-model="form.welfare.points"
                            placeholder=""
                        >
                            <template slot="append">点</template>
                        </el-input>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="">
                    <div class="m-b-10">
                        赠送余额<el-input
                            :disabled="disabled"
                            class="ls-input m-l-10"
                            v-model="form.welfare.balance"
                            placeholder=""
                        >
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                </el-form-item> -->
            </el-form>
        </div>

        <!-- 底部保存或取消 -->
        <div class="bg-white ls-fixed-footer flex row-center">
            <div class="row-center flex">
                <el-button size="small" @click="$router.go(-1)">取消</el-button>
                <el-button size="small" type="primary" :disabled="disabled" @click="onSubmit('form')">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

import {
    apiDistributionIdentityAdd,
    apiDistributionIdentityDetail,
    apiDistributionIdentityEdit
} from '@/api/distribution/distribution'
import GoodsSelect from '@/components/goods-select/index.vue'

@Component({
    components: {
        GoodsSelect
    }
})
export default class DistributionGradeEdit extends Vue {
    /** S Data **/
    identity: number | null = null // 当前编辑用户的身份ID  valid: mode = 'edit'
    roleList: Array<object> = [] // 角色的数据

    mode: any
    id: any
    flag: any = 1
    disabled: any = false
    goodsInfo: any = {
        id: 0,
        name: '',
        price: '¥0.00',
        image: ''
    }
    // 添加管理员表单数据
    form: any = {
        name: '', //是	string	身份名称
        benefit: {
            dividend: {
                //业绩分红
                general: {
                    rate: ''
                }
            },
            province: {
                //地图分红
                general: {
                    rate: ''
                }
            },
            city: {
                //地图分红
                general: {
                    rate: ''
                }
            },
            district: {
                //地图分红
                general: {
                    rate: ''
                }
            }
        },
        welfare: {
            contribution: '',
            points: '',
            balance: ''
        },
        remark: '' //否	string	身份备注
    }

    selectGoods: any = [] //商品选择的商品数据
    /** E Data **/
    @Watch('selectGoods', { deep: true })
    selectGoodsChange(val: any[]) {
        // this.form.update_condition.designatedGoodsId = val.id;
        this.goodsInfo = val
    }
    /** S Methods **/
    // 点击表单提交
    onSubmit(formName: string) {
        // 请求发送
        switch (this.mode) {
            case 'add':
                return this.GradeAdd()
            case 'edit':
                return this.GradeEdit()
        }
    }

    // 编辑
    GradeEdit() {
        apiDistributionIdentityEdit({ ...this.form }).then(() => {
            this.$router.go(-1)
        })
    }

    // 添加
    GradeAdd() {
        apiDistributionIdentityAdd({ ...this.form }).then(() => {
            this.$router.go(-1)
        })
    }
    addLadderItem() {
        if (this.form.benefit.direct.ladder >= 3) {
            return
        }
        this.form.benefit.direct.ladder.push({
            number: '',
            rate: ''
        })
    }
    removeLadderItem(index: number) {
        if (this.form.benefit.direct.ladder.length <= 1) {
            return this.$message.error('至少有一个选项')
        }
        this.form.benefit.direct.ladder.splice(index, 1)
    }
    // 详情
    detail() {
        apiDistributionIdentityDetail({ id: this.id })
            .then(res => {
                this.form = res
            })
            .catch(() => {
                this.$message.error('数据获取失败!')
            })
    }

    /** E Methods **/

    /** S Life Cycle **/
    created() {
        const query: any = this.$route.query

        if (query.mode) {
            this.mode = query.mode
        }
        if (query.flag) {
            this.flag = query.flag
        }
        if (query.disabled) {
            this.disabled = true
        }

        // 编辑模式：初始化数据
        if (this.mode === 'edit') {
            this.id = query.id
            this.detail()
        }
        // 获取角色列表
    }
    /** E Life Cycle **/
}
</script>

<style lang="scss" scoped>
.desc {
    color: #999;
    display: block;
}
.ls-add-admin {
    padding-bottom: 80px;

    .ls-input {
        width: 280px;
        margin-right: 20px;
    }
}
</style>
